<template>
  <div class="gourmetmap-city-page">
    <el-card
      class="aui-card--fill"
      shadow="never">
      <el-form inline>
        <!--        <el-form-item>-->
        <!--          <el-button @click="clickOnAddOrUpdate()" type="primary">-->
        <!--            <i class="el-icon-plus"></i>-->
        <!--            <span>新增城市</span>-->
        <!--          </el-button>-->
        <!--        </el-form-item>-->
      </el-form>
      <div class="table-container">
        <el-table
          :data="dataList"
          border
          style="width: 100%;"
          v-loading="dataListLoading"
        >
          <!--                <el-table-column label="ID" prop="id"></el-table-column>-->
          <el-table-column
            label="图片"
            prop="background"
            width="80"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <midea-admin-image
                :height="60"
                :previewable="true"
                :url="scope.row.background"
                :width="60"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="城市名"
            prop="name"
            header-align="center"
            align="center"
          />

          <el-table-column
            label="顺序"
            prop="sort"
            width="100"
            header-align="center"
            align="center"
          />

          <el-table-column
            :label="$t('handle')"
            align="center"
            fixed="right"
            header-align="center"
            width="160"
          >
            <template slot-scope="scope">
              <el-button
                @click="clickOnAddOrUpdate(scope.row.id)"
                size="small"
                type="primary"
                plain
              >
                {{ $t("update") }}
              </el-button>
              <!--              <el-button-->
              <!--                @click="deleteHandle(scope.row.id)"-->
              <!--                size="small"-->
              <!--                plain-->
              <!--                type="danger"-->
              <!--                >{{ $t("delete") }}-->
              <!--              </el-button>-->
            </template>
          </el-table-column>

          <!--                background，describ-->
        </el-table>
        <!--            <el-pagination-->
        <!--                    :current-page="page"-->
        <!--                    :page-size="limit"-->
        <!--                    :page-sizes="[10, 20, 50, 100]"-->
        <!--                    :total="total"-->
        <!--                    @current-change="pageCurrentChangeHandle"-->
        <!--                    @size-change="pageSizeChangeHandle"-->
        <!--                    layout="total, sizes, prev, pager, next, jumper"-->
        <!--            >-->
        <!--            </el-pagination>-->
        <!-- 弹窗, 新增 / 修改 -->

        <city-add-or-update
          @refreshDataList="getDataList"
          ref="addOrUpdate"
          v-if="addOrUpdateVisible"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import cloneDeep from 'lodash/cloneDeep'
import mixinViewModule from '@/mixins/mike.view-module'
import CityAddOrUpdate from './city-add-or-update'
export default {
  name: 'GourmetmapCity',
  components: { CityAddOrUpdate },
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/midea/menu/foodmap/common/citys',
        getDataListIsPage: true,
        deleteURL: '/midea/menu/foodmap/common/citys/del'
        // deleteIsBatch: true
      },
      dataForm: {}
    }
  },
  methods: {
    clickOnAddOrUpdate (id) {
      this.addOrUpdateVisible = true
      let model = this.dataList.find(item => {
        return item.id === id
      })
      this.$nextTick(() => {
        if (model) {
          this.$refs.addOrUpdate.form = cloneDeep(model)
        }
        this.$refs.addOrUpdate.init()
      })
    }
  }
}
</script>

<style scoped lang="scss"></style>
